<?php use_helper('OpenSocial'); ?>

<div id="align">
  <?php echo add_jsfunction_anchor('Align Left',$align,GadgetsTabSet::ALIGN_LEFT) ?>
  <?php echo add_jsfunction_anchor('Align Center',$align,GadgetsTabSet::ALIGN_CENTER) ?>
  <?php echo add_jsfunction_anchor('Align Right',$align,GadgetsTabSet::ALIGN_RIGHT) ?>
</div>
<div id="display">
  <?php echo add_jsfunction_anchor('Show all',$displayTabs,'true') ?>
  <?php echo add_jsfunction_anchor('Hide all',$displayTabs,'false') ?>
</div>

<div id="tabs_div"></div>
<div id="<?php echo $tab1->getName() ?>">Hi!</div>
<div id="<?php echo $tab2->getName() ?>">Hey!</div>
    
<!-- Add tabs section -->
<div id="addTab">
<input id="tab_name" value="" tabindex="1" type="text">  
<a href="javascript: addTab()">Add tab</a> 
</div>

<!-- Combobox tabs section -->
<div id="removeTab">
  <select id="removeTab_combobox">
  </select>
  <a href="javascript: removeTab()">Remove tab</a> 
  <a href="javascript: removeAllTabs()">Remove All tabs</a> 
</div>

<!-- Combobox to select specific tab -->
<div id="selectTab">
  <select id="selectTab_combobox">
  </select>
  <a href="javascript: selectTab()">Select tab</a> 
</div>

<!-- Combobox to swap specific tabs -->
<div id="swapTabs">
  <select id="first_combobox">
  </select>
  <select id="secound_combobox">
  </select>
  <a href="javascript: swapTabs()">Swap tabs</a> 
</div>


<?php echo JSFunction::addJSOpenTag($updateFunction); ?>
  <?php $selectedTab = $tabset->getSelectedTab();  ?>
  <?php echo $selectedTab->getTabContentContainer(true) ?>.innerHTML = 'selected tabName: '+<?php echo $selectedTab->getTabName(true); ?>+' selected index:'+<?php echo $selectedTab->getTabIndex(true) ?>+' selected name container:'+<?php echo $selectedTab->getTabNameContainer(true) ?>+' selected callback:'+<?php echo $selectedTab->getTabCallback(true) ?>+' selected content container:'+<?php echo $selectedTab->getTabContentContainer(true) ?>;
<?php echo JSFunction::addJSCloseTag($updateFunction) ?>

<?php echo JSFunction::addJSOpenTag(); ?>
  
  // Method used to load all tabs into the combobox
  function loadTabsCombobox()
  {
  	var html = '';
  	
    for(<?php $tab = $tabset->getEachTab(); ?>)
       html += '<option value="'+<?php echo $tab->getTabIndex(true); ?>+'">'+<?php echo $tab->getTabName(true); ?>+'</option>';
    document.getElementById('removeTab_combobox').innerHTML = html;
    document.getElementById('selectTab_combobox').innerHTML = html;
    document.getElementById('first_combobox').innerHTML = html;
    document.getElementById('secound_combobox').innerHTML = html;
  }
  
  // Method used to add tabs
  function addTab()
  {
  	var tab_name = document.getElementById('tab_name').value;
  	<?php 
  	
  	$newTab = new GadgetsTab("tab_name");
  	$newTab->setContentContainer(null);
    $newTab->setCallback($updateFunction); 
    echo $tabset->addTab($newTab,true);
    ?>
    loadTabsCombobox();
  }
  
  function removeTab()
  {
  	var dropdownIndex = document.getElementById('removeTab_combobox').selectedIndex;
  	dropdownIndex = (dropdownIndex)? dropdownIndex : 0;
  	<?php echo $tabset->removeTabByIndex('document.getElementById(\'removeTab_combobox\')[dropdownIndex].value') ?>
  	loadTabsCombobox();
  }
  
  function removeAllTabs()
  {
  	for(<?php $tab = $tabset->getEachTab(0,null,null); ?>)
       <?php echo $tabset->removeTab($tab); ?>
    loadTabsCombobox();
  }
  
  function selectTab()
  {
  	var dropdownIndex = document.getElementById('selectTab_combobox').selectedIndex;
  	dropdownIndex = (dropdownIndex)? dropdownIndex : 0;
  	<?php echo $tabset->setSelectedTabByIndex('document.getElementById(\'selectTab_combobox\')[dropdownIndex].value') ?>
  	loadTabsCombobox();
  }
  
  function swapTabs()
  {
  	var first_dropdownIndex = document.getElementById('first_combobox').selectedIndex;
  	var secound_dropdownIndex = document.getElementById('secound_combobox').selectedIndex;
  	<?php echo $tabset->swapTabsByIndex('document.getElementById(\'first_combobox\')[first_dropdownIndex].value','document.getElementById(\'secound_combobox\')[secound_dropdownIndex].value') ?>
  	loadTabsCombobox();
  }
  
<?php echo JSFunction::addJSCloseTag(); ?>